<template>
  <div class="quality-control">
    <div class="game-header">
      <el-button :icon="ArrowLeft" @click="goBack">返回</el-button>
      <div class="game-title">
        <h1>🔍 质量控制挑战</h1>
        <p>识别产品质量问题，提升质检能力和标准意识</p>
      </div>
      <div class="game-stats">
        <el-statistic title="识别准确率" :value="gameStats.accuracy" suffix="%" />
        <el-statistic title="发现缺陷" :value="gameStats.defectsFound" />
        <el-statistic title="获得积分" :value="gameStats.points" />
      </div>
    </div>

    <!-- 关卡选择 -->
    <div v-if="!gameStarted" class="level-selection">
      <h2>选择质检场景</h2>
      <div class="levels-grid">
        <div 
          v-for="level in levels" 
          :key="level.id"
          class="level-card"
          :class="{ locked: level.locked }"
          @click="!level.locked && startLevel(level)"
        >
          <div class="level-icon" :style="{ background: level.color }">
            {{ level.icon }}
          </div>
          <h3>{{ level.name }}</h3>
          <p>{{ level.description }}</p>
          <div class="level-info">
            <el-tag :type="level.difficultyType" size="small">{{ level.difficulty }}</el-tag>
            <span>{{ level.productCount }} 个产品</span>
            <span>💰 {{ level.points }}积分</span>
          </div>
          <div class="level-standards">
            <span>检测标准:</span>
            <div class="standards-tags">
              <el-tag 
                v-for="std in level.standards" 
                :key="std"
                size="small"
                effect="plain"
              >
                {{ std }}
              </el-tag>
            </div>
          </div>
          <el-icon v-if="level.locked" class="lock-icon"><Lock /></el-icon>
        </div>
      </div>
    </div>

    <!-- 质检游戏界面 -->
    <div v-else class="inspection-game">
      <div class="game-sidebar">
        <div class="timer-panel">
          <h3>⏰ 剩余时间</h3>
          <div class="timer">{{ formatTime(remainingTime) }}</div>
        </div>

        <div class="standards-panel">
          <h3>📋 质检标准</h3>
          <div class="standard-item" v-for="std in currentLevel?.standards" :key="std">
            <el-icon><CircleCheck /></el-icon>
            <span>{{ std }}</span>
          </div>
        </div>

        <div class="tools-panel">
          <h3>🔧 检测工具</h3>
          <div class="tools-grid">
            <el-button 
              v-for="tool in inspectionTools" 
              :key="tool.id"
              :type="selectedTool === tool.id ? 'primary' : 'default'"
              @click="selectTool(tool.id)"
              class="tool-btn"
            >
              <el-icon><component :is="tool.icon" /></el-icon>
              <span>{{ tool.name }}</span>
            </el-button>
          </div>
        </div>

        <div class="stats-panel">
          <h3>📊 检测统计</h3>
          <div class="stat-item">
            <span>已检测:</span>
            <strong>{{ inspectedCount }}/{{ currentLevel?.productCount }}</strong>
          </div>
          <div class="stat-item">
            <span>发现缺陷:</span>
            <strong>{{ foundDefects }}</strong>
          </div>
          <div class="stat-item">
            <span>准确率:</span>
            <el-progress :percentage="currentAccuracy" :color="getAccuracyColor(currentAccuracy)" />
          </div>
        </div>
      </div>

      <div class="game-main">
        <!-- 产品展示区 -->
        <div class="product-display">
          <div class="product-info">
            <h2>产品 #{{ currentProductIndex + 1 }}</h2>
            <el-tag :type="currentProduct?.type === '合格品' ? 'success' : 'danger'" size="large">
              检测中...
            </el-tag>
          </div>

          <!-- 产品图像 -->
          <div class="product-image-area">
            <div class="product-container">
              <div class="product-image" :style="getProductStyle(currentProduct)">
                <div 
                  v-for="defect in currentProduct?.defects" 
                  :key="defect.id"
                  class="defect-marker"
                  :class="{ found: foundDefectIds.includes(defect.id) }"
                  :style="{ left: defect.x + '%', top: defect.y + '%' }"
                  @click="markDefect(defect)"
                >
                  <el-icon v-if="foundDefectIds.includes(defect.id)">
                    <WarningFilled />
                  </el-icon>
                </div>
                
                <!-- 点击区域 -->
                <div 
                  class="inspection-overlay"
                  @click="inspectArea($event)"
                ></div>
              </div>
              
              <!-- 放大镜工具 -->
              <div 
                v-if="selectedTool === 'magnifier' && showMagnifier"
                class="magnifier"
                :style="magnifierStyle"
              ></div>
            </div>
          </div>

          <!-- 产品参数 -->
          <div class="product-params">
            <h3>产品参数</h3>
            <el-descriptions :column="2" border size="small">
              <el-descriptions-item label="产品编号">{{ currentProduct?.id }}</el-descriptions-item>
              <el-descriptions-item label="生产批次">{{ currentProduct?.batch }}</el-descriptions-item>
              <el-descriptions-item label="尺寸">{{ currentProduct?.size }}</el-descriptions-item>
              <el-descriptions-item label="重量">{{ currentProduct?.weight }}</el-descriptions-item>
              <el-descriptions-item label="生产日期">{{ currentProduct?.date }}</el-descriptions-item>
              <el-descriptions-item label="标准">{{ currentProduct?.standard }}</el-descriptions-item>
            </el-descriptions>
          </div>
        </div>

        <!-- 缺陷记录区 -->
        <div class="defects-panel">
          <h3>🔍 已发现缺陷</h3>
          <div class="defects-list">
            <div 
              v-for="defect in foundDefectsList" 
              :key="defect.id"
              class="defect-item"
              :class="{ correct: defect.isCorrect, wrong: !defect.isCorrect }"
            >
              <el-icon><WarningFilled /></el-icon>
              <div class="defect-info">
                <h4>{{ defect.type }}</h4>
                <p>{{ defect.description }}</p>
              </div>
              <el-icon v-if="defect.isCorrect" class="check-icon"><CircleCheck /></el-icon>
              <el-icon v-else class="check-icon"><CircleClose /></el-icon>
            </div>
            <div v-if="foundDefectsList.length === 0" class="empty-state">
              使用工具检查产品，找出质量问题
            </div>
          </div>

          <div class="judgment-area">
            <h4>质检结论</h4>
            <el-radio-group v-model="qualityJudgment" size="large">
              <el-radio-button label="qualified">✅ 合格</el-radio-button>
              <el-radio-button label="defective">❌ 不合格</el-radio-button>
              <el-radio-button label="rework">🔧 返工</el-radio-button>
            </el-radio-group>
          </div>

          <div class="actions">
            <el-button 
              type="primary" 
              size="large"
              :disabled="qualityJudgment === ''"
              @click="submitInspection"
            >
              提交检测结果
            </el-button>
            <el-button size="large" @click="skipProduct">
              跳过 ({{ skipCount }}/3)
            </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 结果对话框 -->
    <el-dialog
      v-model="showResultDialog"
      title="检测结果"
      width="600px"
      :close-on-click-modal="false"
    >
      <div class="result-content">
        <div class="result-icon" :class="inspectionResult.type">
          <el-icon v-if="inspectionResult.type === 'success'"><CircleCheck /></el-icon>
          <el-icon v-else><CircleClose /></el-icon>
        </div>
        <h3>{{ inspectionResult.title }}</h3>
        <p>{{ inspectionResult.message }}</p>
        
        <div class="result-details">
          <el-descriptions :column="2" border>
            <el-descriptions-item label="产品状态">
              {{ currentProduct?.type }}
            </el-descriptions-item>
            <el-descriptions-item label="你的判定">
              {{ getJudgmentText(qualityJudgment) }}
            </el-descriptions-item>
            <el-descriptions-item label="实际缺陷">
              {{ currentProduct?.defects?.length || 0 }}
            </el-descriptions-item>
            <el-descriptions-item label="发现缺陷">
              {{ foundDefects }}
            </el-descriptions-item>
          </el-descriptions>
        </div>

        <div class="points-earned">
          <el-alert
            :title="`${inspectionResult.type === 'success' ? '获得' : '失去'} ${Math.abs(inspectionResult.points)} 积分`"
            :type="inspectionResult.type === 'success' ? 'success' : 'error'"
            :closable="false"
            show-icon
          />
        </div>
      </div>
      <template #footer>
        <el-button type="primary" @click="nextProduct">
          {{ inspectedCount < currentLevel?.productCount ? '下一个产品' : '完成关卡' }}
        </el-button>
      </template>
    </el-dialog>

    <!-- 完成对话框 -->
    <el-dialog
      v-model="showCompleteDialog"
      title="关卡完成"
      width="600px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="complete-content">
        <div class="final-score">
          <h2>最终得分</h2>
          <div class="score-display">{{ finalScore }}</div>
          <el-rate v-model="performanceRating" disabled show-score />
        </div>

        <div class="complete-stats">
          <div class="stat">
            <span>检测产品:</span>
            <strong>{{ inspectedCount }}</strong>
          </div>
          <div class="stat">
            <span>发现缺陷:</span>
            <strong>{{ foundDefects }}</strong>
          </div>
          <div class="stat">
            <span>准确率:</span>
            <strong>{{ currentAccuracy }}%</strong>
          </div>
          <div class="stat">
            <span>误判次数:</span>
            <strong>{{ wrongJudgments }}</strong>
          </div>
        </div>

        <el-alert
          :title="`获得 ${finalScore} 积分！`"
          :type="finalScore >= 200 ? 'success' : 'warning'"
          :closable="false"
          show-icon
        />
      </div>
      <template #footer>
        <el-button @click="restartLevel">重新挑战</el-button>
        <el-button type="primary" @click="goBack">返回游戏中心</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  ArrowLeft, CircleCheck, CircleClose, Lock, WarningFilled,
  View, ZoomIn, Tools
} from '@element-plus/icons-vue'

const router = useRouter()

// 游戏统计
const gameStats = ref({
  accuracy: 89,
  defectsFound: 243,
  points: 3890
})

// 关卡列表
const levels = ref([
  {
    id: 1,
    name: '外观检测',
    icon: '👁️',
    description: '检查产品外观质量问题',
    difficulty: '简单',
    difficultyType: 'success',
    productCount: 10,
    points: 150,
    standards: ['表面光滑', '无划痕', '无污渍', '尺寸规范'],
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    locked: false
  },
  {
    id: 2,
    name: '尺寸测量',
    icon: '📏',
    description: '精确测量产品尺寸规格',
    difficulty: '中等',
    difficultyType: 'warning',
    productCount: 12,
    points: 200,
    standards: ['长度标准', '宽度标准', '高度标准', '公差范围'],
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    locked: false
  },
  {
    id: 3,
    name: '功能测试',
    icon: '⚙️',
    description: '测试产品功能性能指标',
    difficulty: '困难',
    difficultyType: 'danger',
    productCount: 15,
    points: 300,
    standards: ['功能完整', '性能达标', '安全合格', '耐用性测试'],
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    locked: false
  }
])

// 检测工具
const inspectionTools = ref([
  { id: 'eye', name: '肉眼', icon: 'View' },
  { id: 'magnifier', name: '放大镜', icon: 'ZoomIn' },
  { id: 'ruler', name: '卷尺', icon: 'Ruler' },
  { id: 'tool', name: '工具', icon: 'Tools' }
])

// 游戏状态
const gameStarted = ref(false)
const currentLevel = ref(null)
const currentProductIndex = ref(0)
const remainingTime = ref(300)
const inspectedCount = ref(0)
const foundDefects = ref(0)
const currentAccuracy = ref(100)
const wrongJudgments = ref(0)
const skipCount = ref(0)
const selectedTool = ref('eye')
const qualityJudgment = ref('')
const foundDefectIds = ref([])
const foundDefectsList = ref([])
const showMagnifier = ref(false)
const magnifierStyle = ref({})
const showResultDialog = ref(false)
const showCompleteDialog = ref(false)
const finalScore = ref(0)
const performanceRating = ref(3)

// 产品数据
const products = ref([
  {
    id: 'P001',
    type: '不合格品',
    batch: 'B20240101',
    size: '100x50x20mm',
    weight: '250g',
    date: '2024-01-01',
    standard: 'GB/T 19001',
    appearance: 'defect',
    defects: [
      { id: 1, type: '表面划痕', description: '产品表面有明显划痕', x: 30, y: 40, severity: 'high' },
      { id: 2, type: '尺寸偏差', description: '长度超出公差范围', x: 70, y: 60, severity: 'medium' }
    ]
  },
  {
    id: 'P002',
    type: '合格品',
    batch: 'B20240102',
    size: '100x50x20mm',
    weight: '248g',
    date: '2024-01-02',
    standard: 'GB/T 19001',
    appearance: 'good',
    defects: []
  }
])

// 当前产品
const currentProduct = computed(() => {
  return products.value[currentProductIndex.value % products.value.length]
})

// 检测结果
const inspectionResult = ref({
  type: 'success',
  title: '检测正确！',
  message: '你准确识别了产品质量问题',
  points: 50
})

// 获取准确率颜色
const getAccuracyColor = (accuracy) => {
  if (accuracy >= 90) return '#67c23a'
  if (accuracy >= 70) return '#e6a23c'
  return '#f56c6c'
}

// 获取产品样式
const getProductStyle = (product) => {
  const colors = {
    good: 'linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%)',
    defect: 'linear-gradient(135deg, #ffebee 0%, #ffcdd2 100%)'
  }
  return {
    background: colors[product?.appearance] || colors.good
  }
}

// 获取判定文本
const getJudgmentText = (judgment) => {
  const map = {
    qualified: '合格',
    defective: '不合格',
    rework: '返工'
  }
  return map[judgment] || '未判定'
}

// 格式化时间
const formatTime = (seconds) => {
  const mins = Math.floor(seconds / 60)
  const secs = seconds % 60
  return `${mins}:${secs.toString().padStart(2, '0')}`
}

// 开始关卡
const startLevel = (level) => {
  currentLevel.value = level
  gameStarted.value = true
  remainingTime.value = 300
  inspectedCount.value = 0
  foundDefects.value = 0
  wrongJudgments.value = 0
  skipCount.value = 0
  currentProductIndex.value = 0
  
  startTimer()
  resetProduct()
  
  ElMessage.success(`开始关卡: ${level.name}`)
}

// 开始计时
const startTimer = () => {
  const timer = setInterval(() => {
    if (remainingTime.value > 0 && gameStarted.value) {
      remainingTime.value--
    } else {
      clearInterval(timer)
      if (gameStarted.value) {
        completeLevel()
      }
    }
  }, 1000)
}

// 重置产品检测
const resetProduct = () => {
  qualityJudgment.value = ''
  foundDefectIds.value = []
  foundDefectsList.value = []
  foundDefects.value = 0
}

// 选择工具
const selectTool = (toolId) => {
  selectedTool.value = toolId
  ElMessage.info(`选择了${inspectionTools.value.find(t => t.id === toolId)?.name}`)
}

// 检查区域
const inspectArea = (event) => {
  if (selectedTool.value === 'magnifier') {
    const rect = event.currentTarget.getBoundingClientRect()
    const x = event.clientX - rect.left
    const y = event.clientY - rect.top
    
    magnifierStyle.value = {
      left: x + 'px',
      top: y + 'px'
    }
    showMagnifier.value = true
    
    setTimeout(() => {
      showMagnifier.value = false
    }, 2000)
  }
}

// 标记缺陷
const markDefect = (defect) => {
  if (foundDefectIds.value.includes(defect.id)) {
    ElMessage.warning('已标记该缺陷')
    return
  }
  
  foundDefectIds.value.push(defect.id)
  foundDefectsList.value.push({
    ...defect,
    isCorrect: true
  })
  foundDefects.value++
  
  ElMessage.success(`发现缺陷: ${defect.type}`)
}

// 提交检测
const submitInspection = () => {
  inspectedCount.value++
  
  const actualDefects = currentProduct.value.defects?.length || 0
  const isDefective = actualDefects > 0
  
  let isCorrect = false
  
  if (isDefective) {
    isCorrect = qualityJudgment.value === 'defective' || qualityJudgment.value === 'rework'
  } else {
    isCorrect = qualityJudgment.value === 'qualified'
  }
  
  if (isCorrect) {
    const points = 50 + (foundDefects.value * 10)
    inspectionResult.value = {
      type: 'success',
      title: '✅ 检测正确！',
      message: '你准确识别了产品质量问题',
      points: points
    }
    finalScore.value += points
  } else {
    wrongJudgments.value++
    inspectionResult.value = {
      type: 'error',
      title: '❌ 检测错误',
      message: '判定结果不正确，请加强质量意识',
      points: -10
    }
    finalScore.value = Math.max(0, finalScore.value - 10)
  }
  
  // 更新准确率
  currentAccuracy.value = Math.round(((inspectedCount.value - wrongJudgments.value) / inspectedCount.value) * 100)
  
  showResultDialog.value = true
}

// 跳过产品
const skipProduct = () => {
  if (skipCount.value < 3) {
    skipCount.value++
    nextProduct()
    ElMessage.warning(`已跳过 (${skipCount.value}/3)`)
  } else {
    ElMessage.error('跳过次数已用完')
  }
}

// 下一个产品
const nextProduct = () => {
  showResultDialog.value = false
  
  if (inspectedCount.value >= currentLevel.value.productCount) {
    completeLevel()
    return
  }
  
  currentProductIndex.value++
  resetProduct()
}

// 完成关卡
const completeLevel = () => {
  gameStarted.value = false
  
  // 计算星级
  if (currentAccuracy.value >= 95) {
    performanceRating.value = 5
  } else if (currentAccuracy.value >= 85) {
    performanceRating.value = 4
  } else if (currentAccuracy.value >= 75) {
    performanceRating.value = 3
  } else {
    performanceRating.value = 2
  }
  
  // 更新总体统计
  gameStats.value.defectsFound += foundDefects.value
  gameStats.value.points += finalScore.value
  gameStats.value.accuracy = Math.round((gameStats.value.accuracy + currentAccuracy.value) / 2)
  
  showCompleteDialog.value = true
}

// 重新开始
const restartLevel = () => {
  showCompleteDialog.value = false
  finalScore.value = 0
  currentProductIndex.value = 0
  startLevel(currentLevel.value)
}

// 返回
const goBack = () => {
  router.push('/learning/games/center')
}
</script>

<style scoped>
.quality-control {
  padding: 20px;
  max-width: 1600px;
  margin: 0 auto;
}

.game-header {
  display: flex;
  align-items: center;
  gap: 30px;
  margin-bottom: 30px;
  padding: 24px;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  border-radius: 12px;
  color: #2c3e50;
}

.game-title {
  flex: 1;
}

.game-title h1 {
  margin: 0 0 8px 0;
  font-size: 28px;
}

.game-title p {
  margin: 0;
  opacity: 0.9;
}

.game-stats {
  display: flex;
  gap: 40px;
}

.game-stats :deep(.el-statistic__head) {
  color: rgba(44, 62, 80, 0.8);
}

.game-stats :deep(.el-statistic__content) {
  color: #2c3e50;
  font-weight: bold;
}

/* 关卡选择 */
.level-selection {
  padding: 40px;
}

.level-selection h2 {
  text-align: center;
  margin-bottom: 40px;
  font-size: 24px;
  color: #303133;
}

.levels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 24px;
}

.level-card {
  background: white;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.level-card:hover:not(.locked) {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

.level-card.locked {
  opacity: 0.5;
  cursor: not-allowed;
}

.level-icon {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 48px;
}

.level-card h3 {
  margin: 0 0 12px 0;
  font-size: 20px;
  color: #303133;
  text-align: center;
}

.level-card p {
  margin: 0 0 20px 0;
  color: #606266;
  text-align: center;
  line-height: 1.6;
}

.level-info {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  color: #909399;
  font-size: 14px;
}

.level-standards {
  padding-top: 16px;
  border-top: 1px solid #f0f2f5;
  font-size: 14px;
  color: #606266;
}

.standards-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.lock-icon {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 28px;
  color: #909399;
}

/* 游戏界面 */
.inspection-game {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 20px;
}

.game-sidebar {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.timer-panel,
.standards-panel,
.tools-panel,
.stats-panel {
  background: white;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.timer-panel h3,
.standards-panel h3,
.tools-panel h3,
.stats-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.timer {
  font-size: 48px;
  font-weight: bold;
  text-align: center;
  color: #e6a23c;
  font-family: 'Consolas', monospace;
}

.standard-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  color: #606266;
  font-size: 14px;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.tool-btn {
  height: 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.stat-item {
  margin-bottom: 16px;
}

.stat-item span {
  display: block;
  margin-bottom: 8px;
  color: #606266;
  font-size: 14px;
}

.stat-item strong {
  font-size: 18px;
  color: #303133;
}

/* 主游戏区 */
.game-main {
  display: grid;
  grid-template-columns: 1fr 350px;
  gap: 20px;
}

.product-display,
.defects-panel {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.product-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.product-info h2 {
  margin: 0;
  font-size: 22px;
  color: #303133;
}

.product-image-area {
  margin-bottom: 24px;
}

.product-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%;
}

.product-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 12px;
  border: 2px solid #e4e7ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.inspection-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

.defect-marker {
  position: absolute;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(245, 108, 108, 0.3);
  border: 2px solid #f56c6c;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  transform: translate(-50%, -50%);
}

.defect-marker:hover {
  transform: translate(-50%, -50%) scale(1.2);
}

.defect-marker.found {
  background: rgba(245, 108, 108, 0.8);
  color: white;
}

.magnifier {
  position: absolute;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid #409eff;
  background: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  transform: translate(-50%, -50%);
  animation: magnify 0.5s ease;
}

@keyframes magnify {
  0% { transform: translate(-50%, -50%) scale(0); }
  100% { transform: translate(-50%, -50%) scale(1); }
}

.product-params h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

/* 缺陷面板 */
.defects-panel h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #303133;
}

.defects-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
}

.defect-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: #f5f7fa;
  border-radius: 8px;
  margin-bottom: 12px;
  border-left: 3px solid #e6a23c;
}

.defect-item.correct {
  border-left-color: #67c23a;
  background: #f0f9ff;
}

.defect-item.wrong {
  border-left-color: #f56c6c;
  background: #fef0f0;
}

.defect-info {
  flex: 1;
}

.defect-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  color: #303133;
}

.defect-info p {
  margin: 0;
  font-size: 12px;
  color: #909399;
}

.check-icon {
  font-size: 20px;
}

.defect-item.correct .check-icon {
  color: #67c23a;
}

.defect-item.wrong .check-icon {
  color: #f56c6c;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #909399;
  font-size: 14px;
}

.judgment-area {
  margin-bottom: 20px;
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
}

.judgment-area h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #606266;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 结果对话框 */
.result-content {
  padding: 20px;
  text-align: center;
}

.result-icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
}

.result-icon.success {
  background: #f0f9ff;
  color: #67c23a;
}

.result-icon.error {
  background: #fef0f0;
  color: #f56c6c;
}

.result-content h3 {
  margin: 0 0 12px 0;
  font-size: 22px;
  color: #303133;
}

.result-content p {
  margin: 0 0 24px 0;
  color: #606266;
  line-height: 1.8;
}

.result-details {
  margin: 24px 0;
}

.points-earned {
  margin-top: 20px;
}

/* 完成对话框 */
.complete-content {
  padding: 20px;
}

.final-score {
  text-align: center;
  margin-bottom: 30px;
}

.final-score h2 {
  margin: 0 0 16px 0;
  color: #303133;
}

.score-display {
  font-size: 60px;
  font-weight: bold;
  color: #409eff;
  margin-bottom: 16px;
}

.complete-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.complete-stats .stat {
  padding: 16px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
}

.complete-stats .stat span {
  display: block;
  margin-bottom: 8px;
  color: #909399;
  font-size: 14px;
}

.complete-stats .stat strong {
  font-size: 24px;
  color: #303133;
}

@media (max-width: 1400px) {
  .inspection-game {
    grid-template-columns: 1fr;
  }
  
  .game-main {
    grid-template-columns: 1fr;
  }
}
</style>

